/**
 * 不同算法的轮换。
 * @type {*|Function}
 */
$$.scroller = $$.define($$.CardContainer, function(){
	this.init = function(cfg){
		$$.Component.apply(this, [defaultCfg, cfg]);
		$$.CardContainer.call(this);

		this.width = this.el.getStyle('width');

		createScroll.call(this);

		if(this.cfg.DragDrop === true){
			$$.DragDrop.call(this, this.scroll);
		}

		initItem.call(this, cfg.imgs);
		// Add Event
		// 点击事件——>暂停
//		this.customDomEvent(this.scroll /* 注意是 scroll 的 div */, 'click', 'clk');

		// if(this.cfg.isPauseOnClick === true){
		// 	this.on('clk', this.toggle, this);
		// }

		// if(this.cfg.resize === true){
		// 	this.on('windowResize', onResize, this);
		// }
		// // 切换事件 By subClass
		// /* @todo只有一项的时候不进行切换*/
		// if(this.cfg.autoStart === true){
		// 	this.run();
		// }
	}

	// /**
	//  * 启动切换
	//  */
	// this.run = function(){
	// 	if(this.isRunning === true){
	// 		window.clearInterval(this.timer);
	// 	}
	// 	this.timer = window.setInterval(scrollFn.bind(this), this.cfg.interval);
	// 	this.isRunning = true;
	// }

 //    /**
 //     * 暂停切换。
 //     */
 //    this.pause = function(){
 //    	if(this.isRunning == true){
	//         window.clearInterval(this.timer);
	//         this.isRunning = false;
	//         console.log('已暂停 item 切换');
 //        }
 //    }

 //    /**
 //     * 轮换切换。现在是启动的就暂停；现在暂停的就启动。
 //     */
 //    this.toggle = function(){
	// 	if (this.isRunning === true) {
 //            console.log('暂停 item 切换');
 //    		this.pause();
 //        }else{
 //            console.log('重启 item 切换');
 //            this.run();
 //        }
 //    };

	function scrollFn(){
		var gone = this.items[this.currentIndex - 1];
		if (gone && this.currentIndex != 0){
//				gone.style.display = 'none';
			setTimeout(function(){
				gone.addCls('hide');
			}, 0); // 为解决闪烁，特加入这个 setTimeout
		}

		// 接着要显示的
		var next = this.items[++this.currentIndex];
		if(next){
			next.removeCls('hide');
			this.slideFn(this.scroll, 'left', 0, -this.width);
		}

		if (this.currentIndex == this.items.length){	// 到了最后一 item
			this.currentIndex = 0;
			this.items[0].removeCls('hide');
			this.slideFn(this.scroll, 'left', -this.width, 0);

			this.fire('swithcLastItem');
		}

		this.fire('itemSwitch', this.currentIndex);
	}
//		var slideFn = $$.dhtml.Fx.slide;
//		var slideFn = !window.navigator.is_iOS ?  $$.dhtml.Fx.slideByCSS3 : $$.dhtml.Fx.slide;
//		slideFn = $$.dhtml.Fx.slideByCSS3;

	this.slideFn = $$.dhtml.Fx.slide;

    // 拖动设置
    this.lock = 'v';
    this.beforDrag = function(){};
    this.onMoving = function(){
	    return false;
    }
    this.afterDrag = function (e, direction, dis) {
	    console.log('恢复移动，方向{0}，距离{1}'.format(direction, dis));
	    if(e && (dis > 6)){
		    if (direction == 'right') {
		    	this.goNext();
		    } else if (direction == 'left') {
		    	this.goPervious();
		    }
	    }
	}
	this.goPervious = function(){
		refreshDom.call(this);
		var perviousIndex = this.currentIndex - 1;
    	if (perviousIndex < 0){
    		console.log('到达最开始 index = 0');
    	}else{
	    	this.goTo(perviousIndex, true);
    	}
	}
	this.goNext = function(){
		refreshDom.call(this);
		var nextIndex = this.currentIndex + 1;
    	if (nextIndex > this.items.length - 1){
    		console.log('到达最尾端');
    	}else{
	    	this.goTo(nextIndex, true);
    	}
   	}

	function onResize(){
		refreshDom.call(this);
		var width = this.getItemWidth();
		for(var item, i = 0, j = this.items.length; i < j; i++){
			item = this.items[i];
			item.style.width = width;
		}
		this.width = width;
	}

	/**
	 * 创建滚动器
	 */
	function createScroll(){
		//如果没有 ul 元素则自动生成
		var ul = this.el.querySelector('ul');
		if (ul == null){
			ul = document.createElement('ul');
			ul.className = 'x_carouselMover';
			this.el.appendChild(ul);
		}

		this.scroll = ul;
	}

	this.getItemWidth = function(isNumber){
        return isNumber ? document.body.clientWidth : document.body.clientWidth + 'px';
	}

	/**
	 * 初始化 items 和 当前索引 currentIndex
	 * @type {Number} currentIndex
	 */
	function initItem(items){
		if(!items){ /* 已经有Markup */
			this.items = this.el.querySelectorAll('.x_carouselContainer>ul>li');
			var width = this.getItemWidth();
			for(var i = 0, j = this.items.length; i < j; i++){
				this.items[i].style.width = width;
			}
		}else{
			this.items = [];
			appendListItem.call(this, items);
		}

		this.currentIndex = 0;

		if(!this.items){
			throw '[scroll]未有要显示的元素！';
		}
		return this.items;
	}

	/**
	 * @param {Array} items 原始数据
	 * @return {Array} 加入到 List 后的数据
	 */
	function appendListItem(items){

		var width = this.getItemWidth();
		var frag = document.createDocumentFragment();

		for(var li, i = 0, j = items.length; i < j; i++){
			li = document.createElement('li');
			li.addCls('x_carouselItem');
			li.style.width = width;
			if(i != 0){
				li.addCls('hide');
			}
			li.appendChild(items[i]); // 要求 DOM Element

			this.items.push(li);
			frag.appendChild(li);
		}

		this.scroll.appendChild(frag);
	}

    var defaultCfg = {
        /**
        * @cfg {Number} 执行切换动作的毫秒数
        */
        interval: 4000,

        /**
        * @cfg {Boolean} 是否自动启动
        */
        autoStart: true,

        /**
        * @cfg {Boolean} 是否 resize
        */
        resize: true,

        /**
         * @cfg {Boolean} 是否按下便暂停
         */
        isPauseOnClick : true,

        /**
         * @cfg {Boolean} 是否不在视图中即停止的滚动
         * 若 true，可以减少重绘，降低性能消耗。对于滚动时有利。
         * @todo
         */
        isNotRedraw : true,

        /**
         * @cfg {Boolean} 是否支持拖动？
         */
        DragDrop : true
    };

    function refreshDom(){
    	if(!this.items.length){
    		initItem.call(this);
    	}
    }

	/**
	 * @param {Number} goToIndex
	 */
	this.goTo = function(goToIndex, isNoAniamtion){
		// refresh dom stru
		refreshDom.call(this);

		// clear before
		for(var i = 0, j = this.items.length; i < j; i++){
			if(i == this.currentIndex){				// 当前显示着的不要隐藏
				continue;
			}else if(i == goToIndex){				// 接着要显示的，给它显示
		    	this.items[i].removeCls('hide');
			}else{
				this.items[i].addCls('hide');		// 其余的都要隐藏
			}
		}
		// 保证是 int
		var width = window.parseInt(this.width, 10);
		if(goToIndex > this.currentIndex){
			// Next 目标 在左边的
			if(isNoAniamtion){
				this.scroll.style.left = '0px';
				this.scroll.style.left = -width + 'px';
			}else{
				this.slideFn(this.scroll, 'left', 0, -width);
			}
		}else{
			// Next 目标 在右边的
			if(isNoAniamtion){
				this.scroll.style.left = -width + 'px';
				this.scroll.style.left = '0px';
			}else{
				this.slideFn(this.scroll, 'left', -width, 0);
			}
		}

		this.currentIndex = goToIndex;

		this.fire('itemSwitch', this.currentIndex);
	}
});